<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>这是第一个html5的网页</title>
</head>
<body>
<div class="box">
  <div class="header">
    <div class="title-left"><img src="./assets/logo.png" alt="YMCl网站"></div>
    <div class="header-sort">
      <a href="">首页</a>
      <a href="">公司概况</a>
      <a href="">华阳湖景区</a>
      <a href="">岭南水乡小镇</a>
      <a href="">意见反馈</a>
    </div>
  </div>
  <!-- 版心图片区域 -->
  <div class="banner"></div>
  <!-- 内容介绍 -->
<div class="content">
  <div class="content-introduce">
    <div class="content-introduce-title"><span>___________________</span><h3>关于华阳</h3><span>___________________</span>
    </div>
    <!-- 内容介绍body区域 -->
   <div class="content-introduce-body"> 
    <div class="content-introduce-left"><img src="./assets/hua/jing.png" alt=""></div>
   <div class="content-introduce-right"><h3>群山中的华阳湖如一颗璀璨的明珠</h3><p>华阳湖风景区，以高山截流的华阳湖为中心，随境造景，分别建有水上游乐区、 民俗园区、茶文化园区、野果采摘区、会务区、别墅区等各种功能齐备的观光游览服务区。景区建筑红墙黄瓦，独具文化特色，在大自然的碧水青山映衬下，俨然托出了一片充满魅力的人间仙境。
    景区内，游人或可乘小艇劈波于华阳湖上，或可迈步湖畔长堤听山泉喷涌和松涛轰鸣，或可登临拜佛台感悟华阳大佛的广博心境，或可循小径去探索“望夫石”、“观音洞”等美丽的传说中的中华民族的深厚文化底蕴</p></div>
  </div>
  </div>
    <div class="content-list">
      <div class="content-list-title"><span>___________________</span><h3>华阳美景</h3><span>___________________</span>
      </div>
      <!-- list-box区域 -->
      <div class="content-list-box">
        <ul class="content-list-box-img">
          <li><img class="li-img" src="./assets/hua/A1.jpg" alt="">
            <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>花海田园</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>种植花卉形成花海和花坡景观，种植蔬菜、水果形成农田景观。游客可以采摘新鲜水果品尝</p>
            </div>
          </div>
        </li>
          <li><img class="li-img" src="./assets/hua/A2.jpg" alt="">
              <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>水上森林</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>营造湿地水上森林景观，游客可以船在森林水道中划行，也可以漫步于森林中
              </p>
            </div>
          </div></li>
          <li><img class="li-img" src="./assets/hua/A3.jpg" alt="">
              <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>花船巡游</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>各种花卉争妍斗艳，让游人目不暇接。沿蜿蜒的水道，花船驶入花丛中，让游客与花亲密接触
                斗艳，让游人目不暇接。</p>
            </div>
          </div>
        </li>
          <li><img class="li-img" src="./assets/hua/A4.jpg" alt="">
              <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>花海田园</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>种植花卉形成花海和花坡景观，种植蔬菜、水果形成农田景观。游客可以采摘新鲜水果品尝</p>
            </div>
          </div></li>
          <li><img class="li-img" src="./assets/hua/A5.jpg" alt="">
              <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>水上森林</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>营造湿地水上森林景观，游客可以船在森林水道中划行，也可以漫步于森林中</p>
            </div>
          </div></li>
          <li><img class="li-img" src="./assets/hua/A6.jpg" alt="">
              <div class="content-list-box-img-float">
            <div class="little-title">
              <span><img src="./assets/hua/1-icon.png" alt=""></span>
              <p>花船巡游</p>
            </div>
            <!-- little-introduce区域 -->
            <div class="little-introduce">
              <span><img src="./assets/hua/2-icon.png" alt=""></span>
              <p>各种花卉争妍斗艳，让游人目不暇接。沿蜿蜒的水道，花船驶入花丛中，让游客与花亲密接触
                斗艳，让游人目不暇接。</p>
            </div>
          </div></li>
        </ul>
      </div>
    </div>
    <!-- 底部区域bottom -->
    <div class="bottom">
      <p>@2022广东云景旅游文化产业有限公司</p>
      <div class="back"><a href="#">回到顶部</a></div>
       <div class="bottom-link">
        <ul>
          <li><a href="">友情链接</a><span>|</span></li>
          <li><a href="">隐私与安全</a><span>|</span></li>
          <li><a href="">法律声明</a></li>
        </ul>
       </div>
    </div>
</div>
</div>
</body>
</html>
<style>
   ul li{
     list-style: none;
     }
  li{
    list-style-type: none;
    padding:0;
    margin:0
  }
  /* 大盒子区域 */
  .box{
    width:1200px;
     height: 100%;
     margin: auto;
     margin-top:5px;
  }
  /* 头部区域 */
  .header{
   width: 100%;
   height: 60px;
   margin-top: 5px;
   position: relative;
  }
  /* 头部右区域 */
  .header .header-sort{
    height: 100%;
   position: absolute;
   left: 260px;
   display:table;
  }
  /* 头部右区域使用a标签布局 */
  .header .header-sort a{
    text-decoration: none;
    padding-right: 110px;
    display:table-cell;
    vertical-align:middle;
  }
  /* 鼠标悬浮时出现颜色的变换 */
  .header .header-sort a:hover{
    color: blue;
  }
  /* 使用子绝父相定位图片 */
  .header .title-left{
    position:absolute;
    left: 0;
  }
  /* 版心图片区域 */
  .banner{
    width: 100%;
    height: 300px;
    background-color: blue;
    margin-top: 20px;
    background-image: url("assets/hua/banner1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* 内容介绍 */
  .content{
    width: 80%;
    margin: auto;
  }
  /* 第一层内容介绍区域 */
  .content-introduce{
    width: 100%;
    height: 400px;
    /* background-color: saddlebrown; */
    margin-top: 5px;
  }
  /* 内容介绍标题区域 */
  .content-introduce .content-introduce-title{
    display: flex;
    margin-left: 33%;
  }
  .content-introduce .content-introduce-title span{
    padding-top: 12px;
    margin-left: 10px;
    margin-right:  10px;
    color: #bfc3c6;
  }
  /* 华阳湖内容介绍区域 */
  .content-introduce .content-introduce-body{
    display: flex;
  }
.content-introduce .content-introduce-body .content-introduce-right
  {
    width: 50%;
   margin-left: 5px;
   text-align: center;
  }
  /* 华阳湖美景区域 */
  .content-list{
    width:100%;
    height: 678px;
    /* background-color: green; */
    margin-top: 5px;
  }
  .content-list .content-list-title{
    display: flex;
    margin-left: 30%;
    /* background-color: hotpink; */
  }
  .content-list .content-list-title span{
    padding-top: 12px;
    margin-left: 10px;
    margin-right:  10px;
    color: #bfc3c6;
  }
  /* list-box区域 */
  .content-list .content-list-box{
    /* background-color: pink; */
    height: 600px;
  }
  /* 景区区域 */
  .content-list .content-list-box .content-list-box-img{
    width: 96%;
    height: 100%;
  }
  .content-list .content-list-box .content-list-box-img li{
       float: left;
       background-color: blue;
       height:290px;
       width: 30%;
       margin-top: 1%;
       margin-right: 3%;
       position: relative;
  }
  /* 图片区域 */
  .content-list .content-list-box .content-list-box-img li .li-img{
    width: 100%;
    height: 100%;
  }
  /* 图片介绍区域使用子绝父相 */
  .content-list .content-list-box .content-list-box-img-float{
    height: 45%;
    width: 100%;
    position: absolute;
    bottom: 0;
    background:rgba(220,220,220,0.97);
  }
  /* 小标题区域 */
  .content-list .content-list-box .content-list-box-img-float .little-title{
    display: flex;
  }
  .content-list .content-list-box .content-list-box-img-float .little-title span{
    margin-top: 14px;
    margin-right:17px;
    margin-left: 13px;
  }
  .content-list .content-list-box .content-list-box-img-float .little-title p{
    color: #797975;
    margin-top: 9px;
  }
    /* little-introduce区域 */
    .content-list .content-list-box .content-list-box-img-float .little-introduce{
    display: flex;
  }
  .content-list .content-list-box .content-list-box-img-float .little-introduce span{
    margin-top: 9px;
    margin-right:11px;
    margin-left: 4px;
  }
  .content-list .content-list-box .content-list-box-img-float .little-introduce p{
    color: #797975;
    margin-top: -5px;
  }

  /* 底部区域 */
  .bottom{
    width: 100%;
    height: 100px;
    /* background-color: pink; */
    margin-top: 5px;
  }
  .bottom .bottom-link a{
    text-decoration: none;
  }
  .bottom .bottom-link a:hover{
    color:blue;
  }
  .bottom p{
    margin-left: 37px;
    padding-top: 20px;
  }
  .bottom .back{
    float: right;
  }
  .bottom .back a{
    text-decoration: none;
  }
  .bottom .back a:hover{
    color:blue;
  }
  .bottom .bottom-link ul li{
    float: left;
  }
</style>